<template>
  <div>
    <!-- 审批记录 -->
    <!-- <BreakSpace label="审批记录" :containerStyle="{ marginBottom: '10px' }"/> -->
    <BreakSpace label="审批记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns7"
      :dataSource="spList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns7 => this.columns7 = columns7"
    ></FilterTable>
    <!-- 跟进记录 -->
    <BreakSpace label="跟进记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns"
      :dataSource="gjList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns => this.columns = columns"
    ></FilterTable>
    <!-- 客流记录 -->
    <BreakSpace label="客流记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns2"
      :dataSource="klList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns2 => this.columns2 = columns2"
    ></FilterTable>
    <!-- 试驾记录 -->
    <BreakSpace label="试驾记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns3"
      :dataSource="sjList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns3 => this.columns3 = columns3"
    ></FilterTable>
    <Drawer
      :visible.sync="visible_sj"
      title="试驾详情"
      width="80%"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <DriveModal :type="handleType" :rowData="formData" @close="closeHandler" />
    </Drawer>

    <!-- 报价记录 -->
    <BreakSpace label="报价记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns4"
      :dataSource="bjList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns4 => this.columns4 = columns4"
    ></FilterTable>
    <Drawer
      :visible.sync="visible_bj"
      title="报价详情"
      width="80%"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <quotedpriceModal :type="handleType" :rowData="formData" @close="closeHandler" />
    </Drawer>
    
  </div>
</template>

<script>
import {
  queryContactRecord,
  queryOrderRecord,
  queryVisitHsitory,
  getPotenCusById
} from '@/api/potenCus/customer/potenCusManage';
import quotedpriceModal from '../quotedprice/quotedpriceModal';
import DriveModal from '../driveManagement/driveModal';
import ddModal from '../../../retail/salesmanage/salesordermanage/driveModal';
import { dictionary } from '@/utils/dictMixin';
import { formatDates, formatDuring, formatDat} from '@/utils/validate';

export default {
  name: 'contactRecord',
  mixins: [dictionary],
  components: {
    quotedpriceModal,
    DriveModal,
    ddModal
  },
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      gjList: [],
      klList: [],
      sjList: [],
      bjList: [],
      ddList: [],
      hfList: [],
      spList: [],
      columns: this.createTableColumns(),
      columns2: this.createTableColumns2(),
      columns3: this.createTableColumns3(),
      columns4: this.createTableColumns4(),
      columns7: this.createTableColumns7(),
      handleType: '',
      visible_sj: false,
      visible_bj: false,
      visible_dd: false,
      formData: {},
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 接口需要的记录 ID
      console.log('接触过了才有rowData', this.rowData)
      this.recordId = this.rowData.customerBusinessId;
      this.ownerCode = this.rowData.ownerCode;
      this.potentialCustomerNo = this.rowData.potentialCustomerNo;
      console.log('this.recordId', this.recordId)
      this.queryContactList()
      this.getPotenCusList()
    },
    // 获取编辑明细
    async getPotenCusList() {
      const res = await getPotenCusById(this.recordId, 70241002, this.ownerCode);
      if (res.resultCode === 200) {
        this.potentialCustomerId = res.data.potentialCustomersId;
        this.queryContactList()
      }
    },
    async queryContactList() {
      const res = await queryContactRecord(this.recordId, this.ownerCode);
      // const res = await queryContactRecord(545);
      // console.log('查询跟进记录', res.data)
      if (res.resultCode === 200) {
        this.spList = res.data.auditDTOList
        this.gjList = res.data.actionedDTOList
        // this.gjList[0].timeLabel ='是'
        this.gjList.forEach((item, index)=>{
          // console.log(111,item, index)
          if(index == 0){
            item.timeLabel ='是'
          } else{
            item.timeLabel ='否'
          }
        })

        this.klList = res.data.passengerFlowInfoDTOList
        this.sjList = res.data.testdrivePlanDetailDTOList
        this.bjList = res.data.customerPriceDTOList
      }
    },
    // 跟进记录
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '计划跟进时间',
          dataIndex: 'planActionDate',
          width: 150,
          align: 'center',
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.planActionDate) } </span>
          }
        },
        {
          title: '实际跟进时间',
          dataIndex: 'factActionDate',
          width: 150,
          align: 'center',
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.factActionDate) } </span>
          }
        },
        {
          title: '是否首次跟进',
          dataIndex: 'timeLabel',
          align: 'center',
          filterType: 'input',
          initialValue: ''
        },
        {
          title: '是否逾期',
          dataIndex: 'isOverdue',
          align: 'center',
          filterType: 'checkbox',
          render: props => {
            // console.log(props.row.factActionDate,props.row.planActionDate, 'shijian')
            return <span>{((Number(props.row.factActionDate))-(Number(props.row.planActionDate)) >= 0 ? '是':'否')}</span>;
          }
        },
        {
          title: '逾期时长',
          dataIndex: 'overTime',
          align: 'center',
          width: 200,
          filterType: 'checkbox',
          render: props => {
            // console.log('计划跟进时间',props.row.planActionDate)
            // console.log('实际跟进时间',props.row.factActionDate)
            return <span>{ (Number(props.row.factActionDate))-(Number(props.row.planActionDate)) > 0 ?formatDuring(Number(props.row.factActionDate)-Number(props.row.planActionDate)):''}</span>;
          }
        },
        {
          title: '热度/意向级别(前)',
          dataIndex: 'originalLevel',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('1519'),
          render: props => {
            return <span>{this.createDictText(props.row.originalLevel, '1519')}</span>;
          }
        },
        {
          title: '热度/意向级别(后)',
          dataIndex: 'factIntentLevel',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('1519'),
          render: props => {
            return <span>{this.createDictText(props.row.factIntentLevel, '1519')}</span>;
          }
        },
        {
          title: '跟进结果',
          dataIndex: 'actionStatus',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('1517'),
          render: props => {
            return <span>{this.createDictText(props.row.actionStatus, '1517')}</span>;
          }
        },
        {
          title: '跟进方式',
          dataIndex: 'actionModeName',
          align: 'center',
          filterType: 'input',
          // filterItems: this.createDictList('1516'),
          // render: props => {
          //   return <span>{this.createDictText(props.row.planActionMode, '1516')}</span>;
          // }
        },
        {
          title: '预约时间',
          dataIndex: 'bookingDate',
          width: 200,
          align: 'center',
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.bookingDate) } </span>
          }
        },
        {
          title: '所属顾问',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '跟进备注',
          dataIndex: 'taskName',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '本次跟进情形',
          dataIndex: 'scene',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '跟进批注',
          dataIndex: 'markup',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 客流记录
    createTableColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '进店时间',
          dataIndex: 'arriveDate',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.arriveDate) } </span>
          }
        },
        {
          title: '离店时间',
          dataIndex: 'leaveTime',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.leaveTime) } </span>
          }
        },
        {
          title: '接待时长',
          dataIndex: 'time',
          align: 'center',
          render: props =>{
            let time = ''
            if(props.row.leaveTime-props.row.arriveDate > 0){
              time = props.row.leaveTime-props.row.arriveDate
            }
            return <span>{ time > 0?formatDuring(time):"" } </span>
          }
        },
        {
          title: '人数',
          dataIndex: 'arrivePeopleNum',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '进店类型',
          dataIndex: 'passengerFlowType',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('7003'),
          render: props => {
            return <span>{this.createDictText(props.row.passengerFlowType, '7003')}</span>;
          }
        },
        {
          title: '接待人',
          dataIndex: 'consultantName',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 试驾记录
    createTableColumns3() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 50,
          fixed: 'right',
          render: (props, h) => {
            return (
              <div>
                <el-button type="text" size="medium" onClick={() => this.detail_sj(props.row)}>
                  <i class="el-icon-document"></i>
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        { 
          title: '开始时间',
          dataIndex: 'driveSAt',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.driveSAt) } </span>
          }
        },
        {
          title: '结束时间',
          dataIndex: 'driveEAt',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.driveEAt) } </span>
          }
        }, 
        {
          title: '试驾类型',
          dataIndex: 'driveType',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('2026'),
          render: props => {
            return <span>{this.createDictText(props.row.driveType, '2026')}</span>;
          }
        },
        // {//cms合代码注意 （开始里程，结束里程） 两个字段不要了
        //   title: '开始里程(KM)',
        //   dataIndex: 'driveSKm',
        //   align: 'center',
        //   filterType: 'input'
        // },
        // {
        //   title: '结束里程(KM)',
        //   dataIndex: 'driveEKm',
        //   align: 'center',
        //   filterType: 'input'
        // },//cms合代 end
        {
          title: '试驾总里程(KM)',
          dataIndex: 'allMilliage',
          align: 'center',
          filterType: 'input',
          render: props =>{
            let allMilliage = ''
            if(props.row.driveEKm - props.row.driveSKm > 0){
              allMilliage = Math.floor(props.row.driveEKm*10 - props.row.driveSKm*10) / 10
              // allMilliage = props.row.driveEKm - props.row.driveSKm
            }
            return <span>{ allMilliage }</span>
          }
        },
        {
          title: '所属顾问',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 报价记录
    createTableColumns4() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 50,
          fixed: 'right',
          render: (props, h) => {
            return (
              <div>
                <el-button type="text" size="medium" onClick={() => this.detail_bj(props.row)}>
                  <i class="el-icon-document"></i>
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '报价时间',
          dataIndex: 'createdAt',
          minWidth: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.createdAt) } </span>
          }
        },
        {
          title: '所属顾问',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 审批记录
    createTableColumns7() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '申请类型',
          dataIndex: 'actionType',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('7021'),
          render: props => {
            return <span>{this.createDictText(props.row.actionType, '7021')}</span>;
          }
        },
        {
          title: '申请人',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input',
        },
        {
          title: '申请时间',
          dataIndex: 'createdAt',
          minWidth: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.createdAt) } </span>
          }
        },
        {
          title: '申请原因',
          dataIndex: 'reason',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '审批人',
          dataIndex: 'reviewPerson',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '审批时间',
          dataIndex: 'reviewDate',
          minWidth: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.reviewDate) } </span>
          }
        },
        {
          title: '审批结果',
          dataIndex: 'reviewStatus',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '审批备注',
          dataIndex: 'reviewOpinion',
          minWidth: 150,
          align: 'center',
          filterType: 'input'
        }
      ];
    },
    detail_sj(row){
      this.handleType = 'show';
      console.log('试驾详情', row)
      row['testDriveSource'] = 70741001
      this.formData = row
      this.visible_sj = true;
    },
    detail_bj(row){
      this.handleType = 'show';
      console.log('报价详情', row)
      this.formData = row
      this.visible_bj = true;
    },
    detail_dd(row){
      this.handleType = 'show';
      this.formData = row
      console.log('订单详情', row)
      this.visible_dd = true;
    },
    closeHandler(val, type) {
      this.visible_sj = val;
      this.visible_bj = val;
      this.visible_dd = val;
      // if (type === 'refresh') {
      //   // 重新加载
      //   this.fetchParams = { ...this.fetchParams };
      // }
    },

  }
};
</script>

<style lang="less" scoped>
</style>

